<template>
  <div class="express-page page-main">
    <search-form :model="searchParams" @search="search">
      <a-form-item label="名称" name="prop">
        <a-input v-model:value="searchParams.prop" placeholder="请输入" />
      </a-form-item>
    </search-form>
    <div class="table-toolbar" />
    <g-table
      ref="tableRef"
      :columns="columns"
      :api="getPageList"
      :params="searchParams"
    />

    <expressDetail
      v-model:visible="visible"
      :data="activeRow"
      @change="search(false)"
    />
  </div>
</template>

<script setup lang="tsx">
import { expressDel, getPageList, expressUpdateShow } from "./api";
import type { Iexpress } from "./entity";
import expressDetail from "./detail.vue";

const searchParams = reactive({
  prop: "",
});

let visible = $ref(false);

const { tableRef, columns, search } = useTable<Iexpress>([
  { title: "编码", dataIndex: "code" },
  { title: "物流公司名称", dataIndex: "name" },
  { title: "排序", dataIndex: "sort" },
  {
    title: "是否显示",
    dataIndex: "isShow",
    customRender: ({ record }) => (
      <a-switch
        onClick={() => bindStatus(record)}
        v-model:checked={record.isShow}
        inline-prompt
        checkedChildren="开启"
        unCheckedChildren="关闭"
      />
    ),
  },
  { title: "添加时间", dataIndex: "createTime" },
  {
    title: "操作",
    dataIndex: "op",
    customRender: ({ record }) => (
      <>
        <table-button onClick={() => add(record)}>编辑</table-button>
        <confirm-button danger onClick={() => remove(record)}>
          删除
        </confirm-button>
      </>
    ),
  },
]);

let activeRow = $ref<Partial<Iexpress>>({});
function add(row: Partial<Iexpress> = {}) {
  activeRow = { ...row };
  visible = true;
}
const bindStatus = async (data: any) => {
  let { account, code, id, isShow, name, sort } = data;
  await expressUpdateShow({ account, code, id, isShow, name, sort });
  AntMessage.success("操作成功");
  search(false);
};
function remove({ id }: Iexpress) {
  expressDel(id as number).then(() => {
    AntMessage.success("已删除");
    search(false);
  });
}
</script>

<style lang="scss"></style>
